<template>
  <div class="history">
    <el-steps direction="vertical" :space="200">
      <el-step icon="el-icon-loading" v-for="(item,index) in list" :key="index">
        <template slot="description">
          <el-card class="box-card">
            <p class="title">{{item.title}}</p>
            <p class="content">{{item.content}}</p>
            <p class="time">{{item.startTime}}至{{item.endTime}}</p>
          </el-card>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getList() {
      let that = this;
      that
        .$ajax({
          url: "/course/list"
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.list = res.data.data;
            } else {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    }
  },
  mounted() {
    let that = this;
    that.getList();
  }
};
</script>
<style scoped>
.history {
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}
.history .box-card {
  width: 80%;
}
.box-card .title {
  font-size: 20px;
  font-weight: 700;
}
.box-card .content {
  font-size: 16px;
  margin-top: 10px;
}
.box-card .time {
  font-size: 14px;
  margin-top: 15px;
}
.el-card {
  width: 100% !important;
}
.el-step:last-child .el-card {
  width: 90% !important;
}
</style>

